<template>
    <el-form ref="nameFormRef" :model="form" :rules="rules" label-width="60px">
        <el-row :gutter="20">
            <el-col :span="5" :xs="24">
                <el-row>
                    <el-col>
                        <el-form-item  prop="geneName" label-width="0">
                            <UserAvatar v-model="form.avatar" :src="uploadSrc.NAME_AVATAR" :url = "form.avatarUrl"  :fileName="fileName"></UserAvatar>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="性别" prop="gender" label-width="40px">
                            <el-select v-model="form.gender" placeholder="性别" clearable>
                                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="19" :xs="24">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="姓氏" prop="lastName">
                            <el-input v-model="form.name" placeholder="请输入姓氏" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="名" prop="lastName">
                            <el-input v-model="form.lastName" placeholder="请输入名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="名" prop="commonName">
                            <el-input v-model="form.commonName" placeholder="请输入常用名" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="别名" prop="alias">
                            <el-input v-model="form.alias" placeholder="请输入别名" />
                        </el-form-item>
                    </el-col> -->
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="父母" prop="relation">
                            <el-select v-model="form.parentName" placeholder="父母">
                                <el-option
                                v-for="dict in rank"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                                <template #append>
                                    <el-select v-model="form.relation" placeholder="关系" style="width: 80px">
                                        <el-option
                                        v-for="dict in relation"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                        ></el-option>
                                    </el-select>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排行" prop="rankNo">
                            <el-select v-model="form.rankNo" placeholder="请选择排行">
                                <el-option
                                v-for="dict in rank"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="学校" prop="school">
                            <el-input v-model="form.school" placeholder="学校名称" >
                                <template #append>
                                    <el-input v-model="form.professional" placeholder="就读专业名称" class="professAppend"/>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学历" prop="degree">
                            <el-select v-model="form.degree" placeholder="请选择学历">
                                <el-option
                                v-for="dict in degree"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item  prop="degreeStatus" label-width="0px">
                            <el-select v-model="form.degreeStatus" style="width: 80px">
                                <el-option
                                v-for="dict in education_status"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="职务" prop="duties">
                            <el-input v-model="form.duties" placeholder="请输入职务" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头衔" prop="title">
                            <el-input v-model="form.title" placeholder="请输入头衔" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="生于" prop="birthday">
                            <el-date-picker
                                v-model="form.birthday"
                                type="date"
                                placeholder="请选择出生日期"
                                size="default"
                            />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="12">
                        <el-form-item  prop="status" label="状态">
                            <el-select v-model="form.status">
                                <el-option
                                v-for="dict in person_status"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20" v-if="form.status=='1'">
                    <el-col :span="12">
                        <el-form-item label="逝于" prop="deadTime">
                            <el-date-picker
                                v-model="form.deadTime"
                                type="date"
                                placeholder="去世日期"
                                size="default"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="葬地" prop="burialSite">
                            <el-input v-model="form.burialSite" placeholder="请输入葬地" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="住址" prop="desc">
                            <el-input v-model="form.address" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="说明" prop="desc">
                            <el-input v-model="form.mark" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup lang="ts">
    import UserAvatar from '@/views/system/user/profile/userAvatar.vue';
    import { NameVO, NameQuery, NameForm } from '@/api/genealogy/name/types';

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const { degree, rank, relation,sys_user_sex,education_status,person_status } = toRefs<any>(proxy?.useDict('degree', 'rank', 'relation','sys_user_sex','education_status','person_status'));

    const fileName = 'file'

    const uploadSrc = {
        /** 族员头像上传地址 */
        NAME_AVATAR: '/genealogy/name/avatar',
    }
    const props = defineProps({
        wife: {
            type: Object as () => NameForm
        }
    })

    const initFormData: NameForm = {
        id: undefined,
        geneName: undefined,
        name: undefined,
        lastName: undefined,
        commonName: undefined,
        alias: undefined,
        mark: undefined,
        parentId: undefined,
        relation: undefined,
        parentName: undefined,
        rankNo: undefined,
        school: undefined,
        professional: undefined,
        degree: 'none',
        gender: '1',
        duties: undefined,
        title: undefined,
        birthday: undefined,
        status: '0',
        deadTime: undefined,
        address:undefined,
        burialSite: undefined,
        personType: undefined,
        otherId: undefined,
        geId: undefined,
        degreeStatus:'0',
        avatar:undefined,
        avatarUrl:undefined
    }

    const data = reactive<PageData<NameForm, NameQuery>>({
        form: {...initFormData},
        queryParams: {
            geneName: undefined,

        },
        rules: {
            
        }
    });

    const { queryParams, form, rules } = toRefs(data);

    onMounted(()=>{
        form.value = props.wife;
    })

    //点击姓名渲染表单数据
    const loadForm = (data) =>{
        console.log("开始加载数据",data)
        Object.assign(form.value, data);
    }

    /**抛出方法供父组件调用 */
    defineExpose({
        loadForm
    });
    
</script>
<style>
    .img-lg{
        width: 80px;
        height: 80px;
    }
    .user-info-head{
        height: 80px !important;
    }
</style>